<template>
  <div class="rush-con">
    <el-form ref="gateform" :rules="gaterules" :model="gateform" label-position="right" class="gate-con" label-width="140px">
      <el-form-item label="闯关标题" prop="name">
        <el-input v-model="gateform.name" placeholder="请输入闯关标题"/>
      </el-form-item>
      <el-form-item label="闯关限时（秒）" prop="limitTime">
        <el-input maxlength="20"
  show-word-limit  v-model="gateform.limitTime" placeholder="请输入闯关限时"/>
      </el-form-item>
      <el-form-item label="每题答对所获积分" prop="scoreWeight">
        <el-input maxlength="20" v-model="gateform.scoreWeight" placeholder="请输入每题答对所获积分"/>
      </el-form-item>
      <el-form-item label="每题答错所获积分" prop="answerWrongMark">
        <el-input maxlength="20" v-model="gateform.answerWrongMark" placeholder="请输入每题答错所获积分"/>
      </el-form-item>
      <el-form-item label="闯关条件" prop="gateContitionRequest">
        <el-radio-group v-model="gateform.gateContitionRequest">
          <el-radio :label="0">无限制</el-radio>
          <el-radio :label="1">通过前一学习任务</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="过关条件" prop="passContitionType">
        <el-radio-group v-model="gateform.passContitionType">
          <el-radio :label="0">积分</el-radio>
          <el-radio :label="1">答题数量</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="过关条件值" prop="passContitionValue">
        <el-input maxlength="20" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="gateform.passContitionValue" placeholder="请输入过关条件值"/>
      </el-form-item>
      <el-form-item label="出题数量" prop="quesNums">
        <el-input maxlength="20" v-model="gateform.quesNums" placeholder="请输入出题数量"/>
      </el-form-item>
      <el-form-item label="出题方式" prop="makeQuesWay">
        <el-radio-group v-model="gateform.makeQuesWay">
          <el-radio :label="1">随机出题</el-radio>
          <el-radio :label="2">手动出题</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="gateform.makeQuesWay == '1'" label="选择题库">
        <div v-for="(item, index) in clickTree" :key="item.id" class="select-data">{{ item.question }}<i class="el-icon-close" @click="removeQuesBank(item, index)"/></div>
        <div class="selectbtn" @click="handleSelQuesBank">选择题库</div>
      </el-form-item>
      <el-form-item v-if="gateform.makeQuesWay == '2'" label="选择试题">
        <div class="selectbtn" @click="handleSelSt">选择试题</div>
      </el-form-item>
      <div v-if="gateform.makeQuesWay == '2'" class="item-ques">
        <div v-for="(ite, n) in stDataList" :key="ite.id" class="ques-item">
          <div class="ques-item-info">
            <h3 class="ques-item-title">{{ n + 1 }}. {{ ite.question || '' }}</h3>
            <ul class="ques-item-answer">
              <div v-if="ite.type == 1">
                <li v-for="(ans, i) in jsonParse(ite.answer).opt" :key="ans" :class="{'active': ans == getAnswers(ite.answer)}">{{ answerMap[i] }}、{{ ans }}</li>
              </div>
              <div v-if="ite.type == 2">
                <li v-for="(ans, i) in jsonParse(ite.answer).opt" :key="ans" :class="{'active': isSelectActive(ite.answer, ans)}">{{ answerMap[i] }}、{{ ans }}</li>
              </div>
              <div v-if="ite.type == 3">
                <li v-for="ans in yesOrNo.opt" :key="ans" :class="{'active': ans == getAnswers(ite.answer)}">{{ ans }}</li>
              </div>
              <div v-if="ite.type == 4">
                <li><el-input :disabled="true" :value="getAnswers(ite.answer)" placeholder=""/></li>
              </div>
              <div v-if="ite.type == 5">
                <li><el-input :disabled="true" :value="getAnswers(ite.answer)" :rows="2" type="textarea" placeholder=""/></li>
              </div>
            </ul>
          </div>
          <div class="ques-item-btn">
            <i class="el-icon-delete" @click="removeQues(n)"/>
          </div>
        </div>
      </div>
      <el-form-item label="是否增加抽奖活动" prop="isHavePrize">
        <el-radio v-model="gateform.isHavePrize" :label="1">是</el-radio>
        <el-radio v-model="gateform.isHavePrize" :label="0">否</el-radio>
      </el-form-item>
      <template v-if="gateform.isHavePrize == 1">
        <el-form-item label="抽奖活动名称" prop="prizeId">
          <el-select v-model="gateform.prizeId" filterable placeholder="请选择">
            <el-option
              v-for="item in lotteryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="抽奖形式" prop="prizeType">
          <el-select v-model="gateform.prizeType" filterable placeholder="请选择">
            <el-option
              v-for="item in lotteryTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <el-dialog :visible.sync="quesBankDialogVisible" title="试题分类" append-to-body center width="450px" top="20vh">
      <question-bank ref="quesbank"/>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="quesBankDialogVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="subQuesBank">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="stDialogVisible" title="选择试题" append-to-body center width="1000px" top="10vh">
      <question ref="ques"/>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="stDialogVisible=false">取  消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="stSub">确  认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { int, doublescore, intwith } from '@/utils/validate'
import questionBank from './questionBank'
import question from './question'
// import { getLotteryList } from '@/api/course/rush'
export default {
  name: 'Rush',
  components: { questionBank, question },
  props: {
    gateform: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      stDialogVisible: false,
      quesBankDialogVisible: false,
      gaterules: {
        name: [
          { required: true, message: '请输入闯关标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        limitTime: [
          { required: true, message: '请输入闯关限时', trigger: 'blur' },
          { trigger: 'blur', validator: int }
        ],
        quesNums: [
          { required: true, message: '请输入关口出题数量', trigger: 'blur' },
          { trigger: 'blur', validator: int }
        ],
        scoreWeight: [
          { required: true, message: '请输入每题分值', trigger: 'blur' },
          { trigger: 'blur', validator: doublescore }
        ],
        answerWrongMark: [
          { required: true, message: '请输入每题答错所获积分', trigger: 'blur' },
          { trigger: 'blur', validator: doublescore }
        ],
        simpleQuesNum: [
          { required: true, message: '请输入简单题数量', trigger: 'blur' },
          { trigger: 'blur', validator: intwith }
        ],
        generalQuesNum: [
          { required: true, message: '请输入普通题数量', trigger: 'blur' },
          { trigger: 'blur', validator: intwith }
        ],
        diffcultQuesNum: [
          { required: true, message: '请输入困难题数量', trigger: 'blur' },
          { trigger: 'blur', validator: intwith }
        ],
        scoreSimpleQuesNum: [
          { required: true, message: '请输入简单题分值', trigger: 'blur' },
          { trigger: 'blur', validator: doublescore }
        ],
        scoreGeneralQuesNum: [
          { required: true, message: '请输入普通题分值', trigger: 'blur' },
          { trigger: 'blur', validator: doublescore }
        ],
        scoreDiffcultQuesNum: [
          { required: true, message: '请输入困难题分值', trigger: 'blur' },
          { trigger: 'blur', validator: doublescore }
        ],
        gateContitionRequest: [{ required: true, message: '请选择闯关条件', trigger: 'blur' }],
        gateContitionValue: [
          { required: true, message: '请输入闯关条件值', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100', trigger: 'blur' }
        ],
        passContitionType: [{ required: true, message: '请选择过关条件', trigger: 'blur' }],
        passContitionValue: [
          { required: true, message: '请输入过关条件值', trigger: 'blur' },
          { trigger: 'blur', validator: intwith }
        ],
        makeQuesWay: [{ required: true, message: '请选择出题类型', trigger: 'blur' }],
        isRepeated: [{ required: true, message: '请选择可否重复闯关', trigger: 'blur' }],
        scoreFlag: [{ required: true, message: '请选择统一分值', trigger: 'blur' }],
        scoreCoefficient: [
          { required: true, message: '请输入积分系数', trigger: 'blur' },
          { trigger: 'blur', validator: doublescore }
        ],
        scoreIsRepeated: [
          { trigger: 'blur', validator: doublescore }
        ],
        scoreFailCoefficient: [
          { trigger: 'blur', validator: doublescore }
        ],
        isHavePrize: [
          { required: true, message: '请选择是否增加抽奖活动', trigger: 'change' },
        ],
        prizeId: [
          { required: true, message: '请选择抽奖活动', trigger: 'change' },
        ],
        prizeType: [
          { required: true, message: '请选择抽奖形式', trigger: 'change' },
        ],
      },
      clickTree: [],
      stDataList: [],
      answerMap: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F',
        6: 'G',
        7: 'H'
      },
      yesOrNo: { 'opt': ['对', '错'], 'answer': [] },
      /*闯关关联抽奖相关*/
      lotteryOptions:[],
      lotteryTypeList: [
        {
          value: 0,
          label: '大转盘'
        }, {
          value: 1,
          label: '刮刮乐'
        }, {
          value: 2,
          label: '摇一摇'
        },
      ],

    }
  },
  methods: {
    /**
     * 获取所有闯关类型的抽奖活动
     */
    getLotteryOptions() {
      return new Promise((resolve, reject) => {
        getLotteryList({activityType: 2}).then(response => {
          this.lotteryOptions = response.data.data
        }).catch(error => {
          reject(error)
        })
      })
    },
    getFormData() {
      this.$refs['gateform'].validate((valid) => {
        if (valid) {
          return this.gateform
        } else {
          return null
        }
      })
    },
    stSub() {
      const list = this.$refs.ques.selectData
      if (list.length > 0) {
        const arr = []
        const brr = []
        list.forEach(item => {
          arr.push(item)
          brr.push(item.id)
        })
        this.stDataList = Object.assign([], arr)
        this.gateform.quesIds = brr.join(',')
        this.stDialogVisible = false
      } else {
        this.$message({
          message: '请选择试题！',
          type: 'warning'
        })
      }
    },
    isSelectActive(answer, ans) {
      var answrArr = JSON.parse(answer).answer
      for (var i = 0, l = answrArr.length; i < l; i++) {
        if (ans === answrArr[i]) {
          return true
        }
      }
      return false
    },
    handleSelSt() {
      this.stDialogVisible = true
    },
    jsonParse(str) {
      return window.JSON.parse(str)
    },
    getAnswers(str) {
      var t = window.JSON.parse(str)
      var answer = t.answer
      this.answerType = t.type
      if (t.type === 1) {
        return answer[0]
      } else if (t.type === 2) {
        return answer
      } else {
        return answer[0]
      }
    },
    removeQues(index) {
      this.stDataList.splice(index, 1)
    },
    removeQuesBank(item, index) {
      this.clickTree.splice(index, 1)
      var arr = []
      this.clickTree.forEach(item => {
        arr.push(item.id)
      })
      this.gateform.classifyIds = arr.join(',')
    },
    handleSelQuesBank() {
      this.quesBankDialogVisible = true
    },
    setQuesBank(arr) {
      this.clickTree = Object.assign([], arr)
    },
    setQuesList(arr) {
      this.stDataList = Object.assign([], arr)
    },
    subQuesBank() {
      this.clickTree = this.$refs.quesbank.getSelectData()
      if (this.clickTree.length > 0) {
        var arr = []
        this.clickTree.forEach(item => {
          arr.push(item.id)
        })
        this.gateform.classifyIds = arr.join(',')
        this.quesBankDialogVisible = false
      } else {
        this.$message({
          showClose: true,
          message: '请选择试题分类',
          type: 'warning'
        })
      }
    }
  },
  created() {
    this.getLotteryOptions()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$mainColor: #18A5FD;
.rush-con{
  .item-ques{
    margin-top: 10px;
    .ques-item{
      margin-bottom: 10px;
      display: flex;
      .ques-item-info{
        padding: 10px 20px;
        background-color: #F7F7F8;
        position: relative;
        flex: 1;
      }
      .ques-item-btn{
        position: relative;
        width: 40px;
        i{
          position: absolute;
          top: 50%;
          margin-top: -8px;
          left: 50%;
          margin-left: -8px;
          cursor: pointer;
        }
      }
      .ques-item-title{
        width: 80%;
        font-size:14px;
        font-family:PingFangSC-Medium;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin: 0;
      }
      .ques-item-answer{
        margin: 0;
        padding: 0;
        margin-top: 5px;
        margin-left: 15px;
        width: 80%;
        li{
          list-style: none;
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height: 30px;
          &.active{
            color: $mainColor;
          }
        }
      }
      .ques-item-score{
        width: 120px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -14px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        .el-input{
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
